<template>
  <div id="tutorial">
    <div class="main">
      <!-- 头部返回 -->
      <NavbarNoTitle />
      <!-- 顶部播放视频 -->
      <Row>
        <Col span="24">
          <Video id="firstPlayer" v-if="tutorrialinfo.videUrl" :videUrl="tutorrialinfo.videUrl" width="100%" height="211px" />
        </Col>
      </Row>
      <!-- 视频下方的标题组件 -->
      <titleInfo :Title="tutorrialinfo.Title" style="margin-bottom:8px;" />
      <!-- 价钱 折扣 距离结束时间 -->
      <Discounted :discounted="tutorrialinfo.discounted" style="margin-bottom:8px;" />

      <Row>
        <Col span="24">
          <!-- tab切换组件 -->
          <Tab  :labelTitles="tutorrialinfo.labelTitles">
            <!-- 使用slot槽方式传进去 -->
            <!-- 简介槽 -->
            <template slot="Introduction">
              <!-- 讲师头部信息 -->
              <TeacherInfo :avatarHead="tutorrialinfo.avatarHead" />
              <!-- 简介内容显示数据 -->
              <Row>
                <Col span="24" style="padding:20px;">
                  <img v-for="image in tutorrialinfo.imgs" :key="image._id"
                    :width="image.width"
                    :height="image.height"
                    :src="image.img_url"
                  />
                </Col>
              </Row>
              <Row>
                <Col span="24">&nbsp</Col>
              </Row>
              <Row>
                <Col span="24">&nbsp</Col>
              </Row>
              <Row>
                <Col span="24">&nbsp</Col>
              </Row>
            </template>
            <!-- 目录槽 -->
            <template slot="Directory">
              <!-- 折叠面板组件 -->
              <Colllapse
                v-for="(coll,index) in tutorrialinfo.list"
                :key="index"
                :maxTitle="coll.maxTitle"
                :index="index"
              >
                <!-- 折叠面板内部数据槽传进去 -->
                <template slot="collapse">
                  <Row v-for="item in coll.items" :key="item._id">
                    <Col span="24" class="cellitem">
                      <div v-if="item.lock">
                        <a href="javascript:void(0)" class="alock">
                          <!-- 圆圈播放器小图标 -->
                          <van-icon name="play-circle-o" class="ico" size="16" />
                          {{item.title}}
                          <!-- 尾部锁小图标 -->
                          <van-icon name="lock" style="float:right" />
                        </a>
                      </div>
                      <div v-else>
                          <!-- 当点击文字传入当前文字的ID根据这个ID 获取doc元素 进行修改style文字为红色 -->
                        <a
                          :id="item._id"
                          :href="item.url"
                          @click.prevent="clickItem(item._id)"
                          style="color:black;"
                        >
                          <van-icon name="play-circle-o" class="ico" size="16" />
                          {{item.title}}
                        </a>
                        <!-- 试学问字图标 -->
                        <span class="shixue">试学</span>
                      </div>
                    </Col>
                  </Row>
                </template>
              </Colllapse>
            </template>
            <!-- 评价槽 -->
            <template slot="Appraise">
              <!-- 评分数据组件 -->
              <AppraiseHead :score="tutorrialinfo.score" />
            </template>
            <!-- 问题槽 -->
            <template slot="Question"></template>
          </Tab>
        </Col>
      </Row>
    </div>
  </div>
</template>

<script>
//UI布局组件
import { Row, Col } from "view-design";
//顶部返回
import NavbarNoTitle from "../../components/Navbars/Navbar/NavbarNoTitle";
//视频组件
import Video from "../../components/video/video";
//tab切换组件
import Tab from "../../components/Tabs/Tab/Tab";
//标题组件 限时折扣
import titleInfo from "../../components/tutorial/titleInfo/titleInfo";
import Discounted from "../../components/tutorial/Discounted/Discounted";
//教师简介
import TeacherInfo from "../../components/tutorial/Introduction/teacherInfo/TeacherInfo";
//折叠组件
import Colllapse from "../../components/tutorial/Directory/Collapse/Collapse";
//评分组件
import AppraiseHead from "../../components/tutorial/Appraise/AppraiseHead";

import Vue from "vue";
//Icon图标组件
import { Icon } from "vant";
//注册组件
Vue.use(Icon);

//导入vuex 的 actions state
import {mapActions,mapState} from 'vuex'

export default {
  name: "tutorial",
  components: {
    //UI布局组件
    Row,
    Col,
    //顶部返回
    NavbarNoTitle,
    //视频组件
    Video,
    //tab切换组件
    Tab,
    //标题组件
    titleInfo,
    //限时折扣组件
    Discounted,
    //教师简介
    TeacherInfo,
    //折叠组件
    Colllapse,
    //评分组件
    AppraiseHead
  },
  data() {
    return {
      old_id: "", //播放视频点击文字切换红色高亮的文字
    };
  },
  //通过 vuex的 state获取 数据
  computed: mapState({
    tutorrialinfo(state){
      return state.tutorrialinfo;
    }
  }),
  watch: {},
  methods: {
    //注册mapActions方法
    ...mapActions(['reqServerData']),
    //视频播放切换的函数
    clickItem(id) {
      let a;
      //如果上一次id存在
      if (this.old_id) {
        //则更改上次文字颜色为原来颜色
        a = document.getElementById(this.old_id);
        a.style = "color:black;";
      }
      //修改本次点击文字颜色为红色
      a = document.getElementById(id);
      a.style = "color:red;";
      this.old_id = id;
    }
  },
  created() {},
  mounted() {

    //页面数据请求到vuex内
    let params = {
      method:'get',
      methodName:'Tutorrialinfo',
      param:[]
    }
    this.reqServerData(params);

    //插入测试
    //  params = {
    //   method:'post',
    //   methodName:'insertTutorrialinfo',
    //   param:[{
        
    //   }]
    // }
    //this.reqServerData(params);
  },
  beforeCreate() {}, //生命周期 - 创建之前
  beforeMount() {}, //生命周期 - 挂载之前
  beforeUpdate() {}, //生命周期 - 更新之前
  updated() {}, //生命周期 - 更新之后
  beforeDestroy() {}, //生命周期 - 销毁之前
  destroyed() {}, //生命周期 - 销毁完成
  activated() {} //如果页面有keep-alive缓存功能，这个函数会触发
};
</script>

<style scoped>
/* 局部UI样式修改 */
.main {
  background-color: #f5f5f5;
}
.cellitem {
  padding: 10px 0;
}
.alock:link,
.alock:visited,
.alock:hover,
.alock:active {
  color: #a5a5a5;
}

.aclick:link,
.aclick:visited {
  color: black;
}

.ico {
  margin-right: 5px;
  vertical-align: text-top;
}
.shixue {
  display: inline-block;
  border: 1px solid #ff6b43;
  border-radius: 2px;
  color: #ff6b43;
  padding: 0 2px;
  float: right;
}
</style>